<template>
  <div>
    <el-card class="product-item" v-bind:class="product.state === 0 ? 'product-disable' : 'product-enable'">
      <router-link :to="'/lendng-product/detail/' + product.id">
        <div slot="header" class="clearfix">
          <el-tag type="info" v-show="product.state === -1">待发布</el-tag>
          <el-tag type="primary" v-show="product.state === 1">正常</el-tag>
          &nbsp;&nbsp;
          <span>{{ product.title }}</span>
        </div>
        <p>{{ filtersText(product.content) }}</p>
        <el-descriptions class="margin-top item-condition" :column="1" border :labelStyle="{ width: '120px' }">
          <el-descriptions-item>
            <template slot="label">贷款金额</template>
            <span>{{ product.query.loanAmnt }}&nbsp;元</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">贷款分期</template>
            <span>{{ product.query.term }}&nbsp;期</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">贷款利率</template>
            <span>{{ product.query.interestRate }}&nbsp;%</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">分期付款金额</template>
            <span>{{ product.query.installment }}&nbsp;元</span>
          </el-descriptions-item>
        </el-descriptions>
      </router-link>
      <el-button v-show="role === 0" type="primary" @click="openCondititonDialog">查询成功率</el-button>
    </el-card>

    <el-dialog :visible.sync="dialogChapterFormVisible" title="查询成功率">
      <el-form ref="query" :model="query" :rules="rules" label-width="120px" class="condition-query-form">
        <el-form-item label="就业年限">
          <el-input v-model.number="query.employmentLength" prop="employmentLength" @input="form2CheckInput"
            @blur="checkBlur()">
            <template slot="append">年</template>
          </el-input>
        </el-form-item>
        <el-form-item label="房屋所有权状况">
          <el-select v-model="query.homeOwnership" placeholder="活动区域">
            <el-option label="存在" value='1'></el-option>
            <el-option label="不存在" value='0'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年收入">
          <el-input v-model.number="query.annualIncome" prop="annualIncome" @blur="checkBlur()" @input="form2CheckInput">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogChapterFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleProducetQuery">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import invitationApi from '@/api/invitation'
import conditionQuery from '@/api/conditionQuery.js'
export default {
  props: {
    product: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      role: this.$store.getters.roles,
      dialogChapterFormVisible: false,
      query: {
        loanAmnt: 0,
        term: 0,
        interestRate: 0,
        installment: 0,
        employmentLength: 0,
        homeOwnership: 0,
        employmentLength: 0,
        homeOwnership: '0',
        annualIncome: 0,
      },
      rules: {
        employmentLength: [
          { type: 'number', required: true, message: '就业年限应为数字', trigger: 'change' },
          { pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, required: true, message: '就业年限应大于0', trigger: 'change' }
        ],
        annualIncome: [
          { type: 'number', required: true, message: '年收入应为数字', trigger: 'change' },
          { pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, required: true, message: '年收入应大于0', trigger: 'change' }
        ],
      }
    }
  },
  methods: {
    filtersText(val) { // 要判断一下,如果是空就返回空字符串,不然会报错
      if (val != null && val != '') {

        var re1 = new RegExp("<.+?>", "g")
        var msg = val.replace(re1, '')

        return msg.substr(0, 50);//获取富文本文字内容的前50个字符
      } else return ''
    },
    openCondititonDialog() {
      // 弹框
      this.dialogChapterFormVisible = true
    },
    checkBlur() {
    },
    form2CheckInput() {
      try {
        if (this.query.loanAmnt != 0 && this.query.interestRate != 0 && this.query.term != 0) {
          this.query.installment = parseFloat((this.query.loanAmnt * (1 + this.query.interestRate / 100)) / this.query.term).toFixed(2)
        }
        this.$refs.query.validate()
      }
      catch (_) {
      }
    },
    handleProducetQuery() {
      this.$refs.query.validate((valid) => {
        if (valid) {
          this.query.homeOwnership = Number(this.query.homeOwnership)
          this.query.loanAmnt = this.product.query.loanAmnt
          this.query.term = this.product.query.term
          this.query.interestRate = this.product.query.interestRate
          this.query.installment = this.product.query.installment
          this.query.id = this.product.id
          conditionQuery.apply(this.query)
            .then(response => {
              this.$message({
                showClose: true,
                message: '请求成功，请等待管理员审核',
                type: 'success'
              })
              this.dialogChapterFormVisible = false
              this.$router.push({ path: '/condition/list' })
            })
            .catch(() => {
            })
        } else {
          return false;
        }
      });
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.product-item {
  margin-bottom: 20px;
  min-width: 400px;
  margin-left: 20px;
  margin-right: 20px;

  .text.item {
    display: flex;

    .product-item-info-name {
      margin-right: 40px;
    }
  }
}

.condition-query-form {
  padding-left: 5%;

  h3 {
    padding-left: 140px;
  }

  .el-input {
    max-width: 200px;
  }
}
</style>
